<template>
  <div class="container">
    <image class="home-bg" mode="widthFix" :src="bgImg" alt=""></image>

    <!-- 店铺信息 -->
    <div class="shop-info flex align-center">
      <div class="logo">
        <image alt="" :src="iconImg" mode="aspectFill"></image>
      </div>

      <div class="info">
        <div class="name flex align-center">
          <div class="text">api 店铺名称</div>
        </div>
      </div>
    </div>

    <!--店铺统计数据-->
    <shop-data
      :statisticsData="statisticsData"
      :day="day"
      @on-change="fnTabChange"
    />
    
  </div>
</template>
<script>
import { mediaImage } from "@/utils/source";
import ShopData from "./components/ShopData";

export default {
  components: {
    ShopData,
  },
  data() {
    return {
      day: 1,
      statisticsData: {},
      // 默认图
      bgImg: mediaImage("/static/images/index/bg-home.png"),
      iconImg: mediaImage("/static/images/index/logo-default.png"),
    };
  },
  methods: {
    fnTabChange() {},
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding-left: 32rpx;
  padding-right: 32rpx;
  padding-bottom: 64rpx;
  position: relative;
  .home-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
  }
  .shop-info {
    padding: 28rpx 0;
    .logo {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      image {
        width: 80rpx;
        height: 80rpx;
        border: 2rpx solid #fff;
        border-radius: 50%;
      }
    }
    .info {
      flex: 1;
      padding-left: 16rpx;
      .name {
        .text {
          @include font-16-22-bold;
          color: $color-w1;
        }
        .cer-status {
          @include font-10-14;
          margin-left: 8rpx;
          border-radius: 16rpx;
          color: $color-w3;
          border: 2rpx solid $color-w4;
          padding-left: 14rpx;
          padding-right: 14rpx;
          &.success {
            color: $color-success;
            border: 2rpx solid $color-success;
          }
        }
      }
      .meal {
        @include font-10-14;
        display: inline-block;
        background: linear-gradient(107.12deg, #58a5ff 0.9%, #1a66ff 99.34%);
        color: #ffffff;
        padding: 2rpx 6rpx;
        border-radius: 4rpx;
        margin-top: 12rpx;
      }
      .renew {
        display: flex;
        align-items: center;
        @include font-12-16;
        color: $color-w1;
        margin-top: 12rpx;
        .flex {
          padding-left: 16rpx;
          color: $color-primary;
          .iconfont {
            font-size: 24rpx;
          }
        }
      }
    }
    .preview {
      width: 152rpx;
      height: 40rpx;
      justify-content: center;
      background-color: #fff;
      border-radius: 20rpx;
      .iconfont {
        font-size: 28rpx;
        width: 28rpx;
        height: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #939799;
      }
      span {
        @include font-12-16;
        color: $color-w2;
        padding-left: 8rpx;
      }
    }
  }
}
</style>
